<html>
  <head>
    <script type="text/javascript" src="../main/lib/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../main/lib/processing-0.7.1.js"></script>

    <script type="text/javascript" src="../main/src/viz.js"></script>
    <script type="text/javascript" src="../main/src/viz.processing.js"></script>
    <script type="text/javascript" src="../main/src/viz.sequencediagram.js"></script>
    <script type="text/javascript">
      $(function() {
        $("canvas").each(function() {
          var p = Processing(this, "");
          var graphics = viz.graphics.processing($(this), p);
          var slides = viz.slides(viz.screen(), [{
            "type":"sequenceDiagram.messageTransfer",
            "receiver":"wave.wonderland2",
            "message":"ichi\nni\nsan",
            "sender":"wave.wonderland3"
          }]);
          var control = viz(graphics).control(slides, 10);

          $(".prev").click(function() {
            control.previous();
          });

          $(".next").click(function() {
            control.next();
          });

          $(".play").click(function() {
            var playButton = $(this);
            if(playButton.text() === "play") {
              control.play();
              playButton.text("stop");
            } else {
              control.stop();
              playButton.text("play");
            }
          });
        });
      });
    </script>
  </head>
  <body>
    <div>
      <button class="control prev">previous</button>
      <button class="control play">play</button>
      <button class="control next">next</button>
    </div>
    <canvas style="width: 0px; height: 0px;"></canvas>
  </body>
</html>